
import { NavBar, Icon, Tabs, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import { getWeekRank, getMonthRank, getHistoryRank } from './../../action/action';
import { Link } from 'react-router-dom';
import "./index.scss";
import { setCookie } from "../../js/cookie"
import { getCookie } from './../../js/cookie';
const tabs = [
    { title: "周排行" },
    { title: "月排行" },
    { title: "总排行" },
];
@connect(
    (state) => {
        return {
            weekRankData: state.rank.weekRankData,
            monthRankData: state.rank.monthRankData,
            historyRankData: state.rank.historyRankData,
        }
    }
)
export class Rank extends React.Component {
    componentDidMount() {
        let { dispatch } = this.props;
        dispatch(getWeekRank());
        dispatch(getMonthRank());
        dispatch(getHistoryRank());
    }
    render() {
        let { weekRankData, monthRankData, historyRankData } = this.props;
        if (weekRankData && monthRankData && historyRankData) {
            return (
                <div className="rank">
                    <header>
                        <NavBar
                            mode="light"
                            icon={<Icon type="left" />}
                            onLeftClick={() => this.props.history.push(getCookie("ky_history_url"))}
                        >排行
                        </NavBar>
                    </header>
                    <main>
                        <nav>
                            <Tabs tabs={tabs}
                                initialPage={0}
                                useOnPan={true}
                            >
                                <div className="data-box" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                                    <ul>
                                        {
                                            weekRankData.itemList.map((item, index) => {
                                                return (<li key={index}>
                                                    <div className="imgBox">
                                                        <Link to={"/video/" + item.data.id}><img src={item.data.cover.detail} /></Link>
                                                        <span>{item.data.duration / 60 < 10 ? "0" + parseInt(item.data.duration / 60) : parseInt(item.data.duration / 60)}:{item.data.duration % 60 < 10 ? "0" + item.data.duration % 60 : item.data.duration % 60}</span>
                                                    </div>
                                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.data.author.id); }}>
                                                        <div className="info">
                                                            <div className="via">
                                                                <img src={item.data.author.icon} />
                                                            </div>
                                                            <div className="msg">
                                                                <h2>{item.data.title}</h2>
                                                                <p>{item.data.author.name} / #{item.data.category}</p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>)
                                            })
                                        }
                                    </ul>
                                </div>
                                <div className="data-box" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                                    <ul>
                                        {
                                            monthRankData.itemList.map((item, index) => {
                                                return (<li key={index}>
                                                    <div className="imgBox">
                                                        <Link to={"/video/" + item.data.id}><img src={item.data.cover.detail} /></Link>
                                                        <span>{item.data.duration / 60 < 10 ? "0" + parseInt(item.data.duration / 60) : parseInt(item.data.duration / 60)}:{item.data.duration % 60 < 10 ? "0" + item.data.duration % 60 : item.data.duration % 60}</span>
                                                    </div>
                                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.data.author.id); }}>
                                                        <div className="info">
                                                            <div className="via">
                                                                <img src={item.data.author.icon} />
                                                            </div>
                                                            <div className="msg">
                                                                <h2>{item.data.title}</h2>
                                                                <p>{item.data.author.name} / #{item.data.category}</p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>)
                                            })
                                        }
                                    </ul>
                                </div>
                                <div className="data-box" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                                    <ul>
                                        {
                                            historyRankData.itemList.map((item, index) => {
                                                return (<li key={index}>
                                                    <div className="imgBox">
                                                        <Link to={"/video/" + item.data.id}><img src={item.data.cover.detail} /></Link>
                                                        <span>{item.data.duration / 60 < 10 ? "0" + parseInt(item.data.duration / 60) : parseInt(item.data.duration / 60)}:{item.data.duration % 60 < 10 ? "0" + item.data.duration % 60 : item.data.duration % 60}</span>
                                                    </div>
                                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.data.author.id); }}>
                                                        <div className="info">
                                                            <div className="via">
                                                                <img src={item.data.author.icon} />
                                                            </div>
                                                            <div className="msg">
                                                                <h2>{item.data.title}</h2>
                                                                <p>{item.data.author.name} / #{item.data.category}</p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </li>)
                                            })
                                        }
                                    </ul>
                                </div>
                            </Tabs>
                        </nav>
                    </main>
                </div>
            )
        } else {
            return (<div></div>)
        }
    }
}